<template>
  <div>
    <el-page-header style="background-color: chocolate;
  color: white;height: 60px;line-height: 60px;font-weight: bold" @back="goBack" content="添加轮播图页面">
    </el-page-header>
    <!--分割线-->
    <el-divider></el-divider>
    <el-card>
      <!--选择图片组件开始-->
      <!--limit=1设置只能选择一张图片-->
      <el-upload
          limit="1"
          action="/upload"
          name="picFile"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-success="handleSuccess"
          :on-exceed="exceed"
          :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
      <!--选择图片组件结束-->
      <el-button @click="send()">发布轮播图</el-button>
    </el-card>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
import axios from "axios";
export default {
  name: "BannerView",
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      url:""
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
      axios.get("/remove?name=" + file.response).then(function (response) {
        console.log("删除完成!");
        this.url="";
      })

    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSuccess(response,file, fileList) {
      //response代表上传成功时服务器返回的图片路径
      this.url=response;
    },
    send(){
      //判断是否选择了图片
      if (this.url==""){
        this.$message.error("请选择上传的图片!");
        return;
      }
      //发布轮播图请求
      axios.get("/banner/insert?url="+v.url).then(function () {
        //发布成功后跳转回管理页面
        location.href="/admin.html?index=2-1";
      })

    },
    goBack(){
      history.back();//返回上一页面
    },
    exceed(){
      this.$message.error("图片只能选择1个!");
    }
  }
}
</script>

<style scoped>

</style>